<template>
	<view>
		<uni-nav-bar :statusBar="true" dark title="赛事单位" fixed left-icon="left" @clickLeft="clickLeft">
		</uni-nav-bar>
		<view class="content">
			<!-- :rules="customRules" -->
			<uni-forms class="form" ref="baseForm" :modelValue="baseFormData">
				<uni-forms-item class="logo" labelWidth="180rpx" label="logo" >
					<uni-file-picker :autoUpload="false" limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
						file-mediatype="image" :value="logoImg" @progress="progress" @select="select">选择</uni-file-picker>
				</uni-forms-item>
				<uni-forms-item class="logo" labelWidth="180rpx" label="img">
					<uni-file-picker :value="selectcoachPhoto" file-mediatype="image" limit="3" :imageStyles="imageStyles1" @select="select1" @delete="delete1">
						选择img
					</uni-file-picker>
				</uni-forms-item>
				<uni-forms-item labelWidth="200rpx" label="比赛开始时间"  name="startTime">
					<uni-datetime-picker v-model="baseFormData.startTime" type="date" :clear-icon="false"
						@maskClick="maskClick">
						<uni-easyinput    v-model="baseFormData.startTime" placeholder="请选择时间" />
					</uni-datetime-picker>
				</uni-forms-item>
				<uni-forms-item labelWidth="200rpx" label="比赛结束时间"  name="endTime">
					<uni-datetime-picker v-model="baseFormData.endTime" type="date" :clear-icon="false"
						@maskClick="maskClick1">
						<uni-easyinput    v-model="baseFormData.endTime" placeholder="请选择时间" />
					</uni-datetime-picker>
				</uni-forms-item>
				<uni-forms-item labelWidth="180rpx" label="比赛项目"  name="item">
					<uni-easyinput v-model="baseFormData.item" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item labelWidth="180rpx" label="比赛地点"  name="addres">
					<uni-easyinput v-model="baseFormData.addres" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item labelWidth="180rpx" label="比赛规模"  name="scale">
					<uni-easyinput v-model="baseFormData.scale" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item labelWidth="180rpx" label="比赛介绍"  name="introduce">
					<uni-easyinput v-model="baseFormData.introduce" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item labelWidth="180rpx" label="主办单位"  name="auspice_name">
					<uni-easyinput v-model="baseFormData.auspiceName" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item labelWidth="180rpx" label="承办单位"  name="undertake_name">
					<uni-easyinput v-model="baseFormData.undertakeName" placeholder="请输入" />
				</uni-forms-item>
				
				<uni-forms-item class="logo" labelWidth="180rpx" label="协办单位" >
					<uni-easyinput v-model="baseFormData.jointName" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item class="logo" labelWidth="180rpx" label="冠名单位" >
					<uni-easyinput v-model="baseFormData.titleName" placeholder="请输入" />
				</uni-forms-item>
				<uni-forms-item class="logo" labelWidth="180rpx" label="赞助单位" >
					<uni-easyinput v-model="baseFormData.sponsorName" placeholder="请输入" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="bottomBtn">
			<button @click="onCreated" type="submit" class="submit">
				快速创建
			</button>
		</view>
	</view>
</template>

<script>
	import {
		uploadAvatar,
		createbrief,
		getImage,
		getbriefInfo
	} from '@/api/basketballTeam/index.js'
	import {imageUrl} from '@/config.js'
	export default {
		data() {
			return {
				baseFormData: {
					logo: '',
					startTime:'',
					endTime:'',
					item:'',
					addres:'',
					scale:'',
					introduce:'',
					auspiceName:'',
					sponsorName:'',
					undertakeName:'',
					jointName:'',
					titleName:'',
					img:[]
				},
				imageStyles: {
					width: '100rpx',
					height: '100rpx',
					border: {
						radius: '50%'
					}
				},
				imageStyles1: {
					border: 0
				},
				imgList:[],
				imageUrl: imageUrl,
				selectcoachPhoto:[],
				logoImg:[],
				// customRules: {
				// 	teamName: {
				// 		rules: [{
				// 			required: true,
				// 			errorMessage: '请输入'
				// 		}]
				// 	},
				// }
			}
		},
		onLoad() {
			this._getbriefInfo()
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			select(e) {
				console.log('选择文件：', e)
				uploadAvatar({file: e.tempFiles[0].file}).then(res => {
					this.baseFormData.logo = res.data;
				})
			},
			delete1(e) {
				console.log(e)
			},
			select1(e){
				this.imgList.push(e.tempFiles[0].file)
			},
			_getbriefInfo() {
				getbriefInfo().then(res => {
					console.log(res.data,"----")
					this.baseFormData = res.data;
					this.logoImg = [{
						url: this.imageUrl + this.baseFormData.logo
					}]
					let list = this.baseFormData.img.split(",")
					list.map(item => {
						this.selectcoachPhoto.push({url:this.imageUrl+item})
					})
					console.log(this.selectcoachPhoto,"this.selectcoachPhoto")
				})
			},
			onCreated() {
				console.log(this.baseFormData,"-----this.baseFormData")
				let leagueId = uni.getStorageSync('contestId');
				this.$refs['baseForm'].validate().then(async (res) => {
					let imgs = []
					for(let i = 0; i < this.imgList.length; i++) {
						await uploadAvatar({file: this.imgList[i]}).then((res) => {
							imgs.push(res.data)
						})
					}
					createbrief({...this.baseFormData, img: imgs.join(","),leagueId: leagueId}).then(res => {
						this.$modal.msg(res.msg)
						// setTimeout(() => {
						// 	uni.navigateBack()
						// }, 600)
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 40rpx 20rpx;
		overflow-y: auto;
		.logo {
			display: flex;
			align-items: center;
			padding-bottom: 40rpx;
		}
		.logo1 {
			display: flex;
			.chooseBox{
				width: 100rpx;
				text-align: center;
				padding: 10rpx 20rpx;
				border: 1px solid #eee;
				border-radius: 10rpx;
			}
			.imgBox{
				width: 54rpx;
				height: 54rpx;
				margin-right: 20rpx;
				border-radius: 50%;
				overflow: hidden;
			}
		}
	}
	.bottomBtn {
		display: flex;
		justify-content: center;
		flex-direction: column;
		background-color: #fff;
		position: -webkit-sticky;
		position: sticky;
		bottom: 0;
		padding: 21px 16px;
		padding-bottom: calc(21px + env(safe-area-inset-bottom));
		border-top: 1px solid #eee;
		.submit-text {
			display: flex;
			
			font-size: 24rpx;
		}
		.submit {
			background-color: $btn-bg-color;
			color: #fff;
			width: 100%;
			font-size: 34rpx;
			font-weight: 800;
			margin-top: 20rpx;
		}
	}
	::v-deep .icon-del{
		position: absolute !important;
	}
</style>